<template>
    <el-main class="imageMain" v-loading="loading">
        <div class="imageMainTop">
            <el-row :gutter="10">
                <el-col :span="6" :offset="0" v-for="(item, index) in  list " :key="item.id">
                    <el-card shadow="hover" class="imageMainTopCard" :body-style="{ 'padding': 0 }"
                        :class="{ 'imageMainTopCardActive': item.checked }">
                        <el-image :preview-src-list="[item.url]" :initial-index="0" :src="item.url" fit="cover"
                            class="imageMainTopCardImage"></el-image>
                        <div class="imageMainTopTitle">
                            {{ item.name }}
                        </div>
                        <div class="imageMainTopCardBtn">
                            <el-checkbox v-if="openChoose" v-model="item.checked"
                                @change="handleChooseChange(item)"></el-checkbox>
                            <el-button type="primary" size="small" text @click="handleEdit(item)">
                                重命名
                            </el-button>
                            <el-popconfirm title="是否删除该图片" confirmButtonText="确认" cancelButtonText="取消"
                                @confirm="handleDelete(item.id)">
                                <template #reference>
                                    <el-button class="imageMainTopCardBtnDelete" type="primary" size="small" text>
                                        删除
                                    </el-button>
                                </template>
                            </el-popconfirm>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </div>
        <div class="imageMainBottom">
            <el-pagination background layout="prev,pager, next" :total="total" :current-page="currentPage"
                :page-size="limit" @current-change="getData" />
        </div>
    </el-main>

    <el-drawer v-model="drawer" title="上传图片">
        <Upload :data="{ image_class_id }" @success="handleUploadSuccess"></Upload>
    </el-drawer>
</template>
<script setup>
import { ref, computed } from 'vue';
import { getImageList, updateImageList, deleteImageList } from '@/api/image.js'
import { elMessageBox2 } from '@/hooks/elMessageBox.js'
import { elNotification } from '@/hooks/elNotification.js'
import Upload from './Upload.vue'

// 上传图片
const drawer = ref(false)
const openUploadFile = () => {
    drawer.value = true
}

// 分页
const currentPage = ref(1)
const total = ref(0)
const limit = ref(10)
const list = ref([])
const loading = ref(false)
const image_class_id = ref(0)

// 获取数据
function getData(p = null) {
    if (typeof p == "number") {
        currentPage.value = p
    }
    loading.value = true
    getImageList(image_class_id.value, currentPage.value).then(res => {
        list.value = res.list.map(o => {
            o.checked = false
            return o
        })
        total.value = res.totalCount
    }).finally(() => {
        loading.value = false
    })
}

// 根据分类ID重新加载图片列表
const loadData = (id) => {
    currentPage.value = 1
    image_class_id.value = id
    getData()
}

// 重命名
const handleEdit = (item) => {
    elMessageBox2("重命名", item.name).then(({ value }) => {
        loading.value = true
        updateImageList(item.id, value).then(res => {
            elNotification("修改成功")
            getData()
        }).finally(() => {
            loading.value = false
        })
    })
}

// 删除图片
const handleDelete = (id) => {
    loading.value = true
    deleteImageList([id]).then(res => {
        elNotification("删除成功")
        getData()
    }).finally(() => {
        loading.value = false
    })
}

// 上传成功
const handleUploadSuccess = () => getData(1)

const props = defineProps({
    openChoose: {
        type: Boolean,
        default: false
    },
    limit: {
        type: Number,
        default: 1
    }
})

// 选择图片
const emit = defineEmits(["choose"])
const checkedImage = computed(() => list.value.filter(o => o.checked))
const handleChooseChange = (item) => {
    if (item.checked && checkedImage.value.length > props.limit) {
        item.checked = false
        return elNotification(`最多只能选中${props.limit}张`, 'error')
    }
    emit("choose", checkedImage.value)
}

defineExpose({
    loadData,
    openUploadFile
})
</script>
<style scoped lang="less">
.imageMain {
    position: relative;
    border-right: 1px solid #eee;

    .imageMainTop {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 50px;
        padding: 10px;
        overflow-y: auto;

        .imageMainTopTitle {
            position: absolute;
            top: 122px;
            left: -1px;
            right: -1px;
            padding: 2px 5px;
            font-size: 14px;
            overflow: hidden;
            text-overflow: ellipsis;
            color: #dddddd;
            opacity: 0.5;
            background-color: #444444;
        }

        .imageMainTopCard {
            position: relative;
            margin-bottom: 10px;



            .imageMainTopCardImage {
                width: 100%;
                height: 150px;
            }

            .imageMainTopCardBtn {
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 5px;

                .imageMainTopCardBtnDelete {
                    margin: 0 !important;
                }
            }
        }

        .imageMainTopCardActive {
            border: 1px solid blue
        }
    }

    .imageMainBottom {
        position: absolute;
        bottom: 0;
        height: 50px;
        left: 0;
        right: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
</style>